{extend name="base" /}
{block name="title"}已收录的开源项目|程序员的收藏夹-专注于程序员学习、分享{/block}


{block name="header"}
	{include file="public/user_header" /}
{/block}

{block name="content"}
<div class="zbd-content">
	<div class="page pt20">
		<div class="row project">
		    <div class="w9">
		    	<div class="row">
				    <div class="w8">
				    	<div class="slider" data-slider-time="5000" data-slider-button="false">
				    		<!-- {foreach $list as $key => $val}
							<div class="slider-item">
								<img class="gaodu" src="{$val['pic']}" style>
							</div>
							{/foreach} -->
							<div class="slider-item">
								<img class="gaodu" src="http://pic.zhengbingdong.cn/upload/20220330/32acabde86318c9fe98127f8bc275359.png">
							</div>
						</div>
				    </div>
				    <div class="w4">
				    	<div class="row">
						    <div class="w12 mb20">
						    	<div class="slider">
									<div class="slider-item">
										<img class="gaodu-li" src="http://pic.zhengbingdong.cn/upload/20220323/fe8db208362e875d55e4fc89c55faf57.png">
									</div>
								</div>
						    </div>
						    <div class="w12">
						    	<div class="slider">
									<div class="slider-item">
										<img class="gaodu-li" src="http://pic.zhengbingdong.cn/upload/20220330/839ff5bcbb42e2bb3a876120b8ec7345.png">
									</div>
								</div>
						    </div>
						</div>
				    </div>
				</div>
		    </div>
		    <div class="w3">
		    	<div class="user_info_right">
		    		<div class="user_info_right_top bg-blue">
		    			<p><img class="u-pic-avatar widthed align-middle" src="{$userInfo['avatar']|default='http://pic.zhengbingdong.cn/upload/20220327/4e7b348516ddb23dc43cd4e7bb2c916d.png'}"> <span class="mincd">{$userInfo['nickname']|default="未登录"}</span> <a href="#" class="tag bg-orange btn-shadow right icon ice-plus fabuwode"> 发布</a></p>
		    			<div class="row pt10">
						    <div class="col"><p>发布 0</p></div>
						    <div class="col"><p>喜欢 0</p></div>
						    <div class="col"><p>收藏 0</p></div>
						    <div class="col"><p>评论 0</p></div>
						</div>
		    		</div>
		    		<div class="user_info_title icon ice-about bold"> 公告</div>
		    		<div class="item-disc">
					    <p class="el"><a href="javascript:;" class="black">每天收集更新互联网上好用的开源项目！</a></p>
					    <p class="el"><a href="javascript:;" class="black">开源项目数据来自于互联网收集或网友上传！</a></p>
					    <p class="el"><a href="javascript:;" class="black">项目真实性以项目作者为准！</a></p>
					</div>
		    	</div>
		    </div>
		</div>
	</div>

	<div class="page pt20">
		<div class="row">
			<div class="w9">
				<div class="row">
					<div class="nav-menu zbd-nav-pro mr0 mb15 yy">
				        <ul class="nav-list">
				            <li><a href="javascript:;" class="JS-serrch blue" data-sort="">全部开源</a></li>
				            <li><a href="javascript:;" class="JS-serrch" data-sort="browse">最多人看</a></li>
				            <li><a href="javascript:;" class="JS-serrch" data-sort="create_time">最新收录</a></li>
				        </ul>
				    </div>
				</div>
				<div class="row baise">
					<span class="tag tag-radius JS-tag cursor-pointer bg-blue mb10" data-type_id="">全部分类</span>
					{foreach $typeList as $key => $val}
				    <span class="tag tag-radius JS-tag cursor-pointer mb10" data-type_id="{$val['id']}">{$val['name']}</span>
				    {/foreach}
				</div>
				<!-- <div class="row baise text-center" id="kong">
						<p class="icon ice-message daico"></p>
						<p class="daico-text">暂无开源项目！</p>
				</div> -->
				<div class="row baise" id="proList">
					{foreach $list as $key => $val}
					<div class="row mb20 bob1">
						<div class="zbd-fm-w3 left">
							<div class="picwai">
								<img class="zbd-fm left" src="{$val['pic']}">
							</div>
						</div>
						<div class="project-title right">
							<a href="/project/article?id={$val['id']}" class="project-title-a el">
							{if condition="$val['is_top'] == 1"}<span class="bg-red zhiding">置顶</span>{/if}
							{$val['title']|default='标题丢失'} </a>
							<div class="doc-intro-act">{$val['remark']|default='~'}</div>

							<div class="project-user">
								<img class="project-user-pic align-middle" src="{$val['user']['avatar']}"> {$val['user']['nickname']|default='未知用户'}
								<p class="tishide"><span class="mr15">所属：{$val['type']['title']|default='-'}</span> <span class="mr15">收录于：{$val['create_time']}</span> <span>阅读：{$val['browse']|default='0'}</span></p>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
				<div class="row" id="gengduo">
					<div class="gengduo cursor-pointer blue JS-next"><span id="loadtext">加载更多</span><span class="icon ice-arrow-triangle-b"></span></div>
				</div>
			</div>
			<div class="w3">
				<div class="box" data-scroll-class="finxzhuanti" data-scroll-top="600" data-scroll-delay="1" data-scroll-type="auto">
					<div class="box-title">收录专题 <a href="/project/special" target="_blank" class="right"><div class="icon-arrow-r"><span></span></div></a></div>
					
					<div class="box-content">
						<ul class="list">
							{foreach $typeList as $key => $val}
							<li class="list-item">
								<span class="list-icon"><img class='type-icon align-middle' src="{$val['pic']}"></span>
								<span class="list-title"><a href="/project/spdetail?id={$val['id']}" class="black small">{$val['title']}</a></span>
								<span class="list-time blue bold">{$val['source_count']}</span>
							</li>
							{/foreach}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="page" value="1">
	<input type="hidden" id="sort" value="">
	<input type="hidden" id="type_id" value="">
</div>
<script type="text/javascript" src="/static/web/zbdui/src/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	ice(function(){
		// 条件筛选
		ice(".JS-serrch").click(function(e) {
			var sort = ice(this).attr("data-sort")

			$('.JS-serrch').removeClass('blue');
			ice(this).addCss('blue')

			ice("#sort").val(sort)
			
			ice("#page").val(1)
			var maps = {
				page: 1,
				sort: sort,
				type_id: ice("#type_id").val()
			}
			getList(maps, 'html');
		})

		// 点击分类
		ice(".JS-tag").click(function(e) {
			var type_id = ice(this).attr("data-type_id")

			$('.JS-tag').removeClass('bg-blue');
			ice(this).addCss('bg-blue')

			ice("#type_id").val(type_id)
			ice("#page").val(1)
			var maps = {
				page: 1,
				sort: ice("#sort").val(),
				type_id: type_id
			}
			getList(maps, 'html');
		})

		// 点击下一页
		ice(".JS-next").click(function(e) {
			ice("#loadtext").html('正在努力加载中...')
			var maps = {
				page: ice("#page").val() == 1 ? 2 : ice("#page").val(),
				sort: ice("#sort").val(),
				type_id: ice("#type_id").val(),
			}
			getList(maps);
		})

		// 请求接口
		function getList(maps, type='append')
		{
			ice.ajax({
			    url:'/project/getAjaxProject',
			    type:'get',
			    data: maps,
			    success:function(res){
			    	ice("#loadtext").html('加载更多')
			    	if(res.code == 1){
			    		ice.pop({content:res.message,icon:'fail'})
			    		return false

			    	} else{

				    	var content = '';
				    	var data = res.data
				    	for (var i = 0; i < data.length; i++) {
				    		content += '<div class="row mb20 bob1">'
								content += '<div class="zbd-fm-w3 left">'
									content += '<div class="picwai">'
										content += '<img class="zbd-fm left" src="'+data[i]['pic']+'">'
									content += '</div>'
								content += '</div>'
								content += '<div class="project-title right">'
									if(data[i]['is_top'] == 1){
										content += '<a href="/project/article?id='+data[i]['id']+'" class="project-title-a el"><span class="bg-red zhiding">置顶</span>'+data[i]['title']+' </a>'
									} else{
										content += '<a href="/project/article?id='+data[i]['id']+'" class="project-title-a el">'+data[i]['title']+' </a>'
									}
									content += '<div class="doc-intro-act">'+data[i]['remark']+'</div>'

									content += '<div class="project-user">'
										content += '<img class="project-user-pic align-middle" src="'+data[i]['user']['avatar']+'"> '+data[i]['user']['nickname']
										content += '<p class="tishide"><span class="mr15">所属：'+data[i]['type']['title']+'</span> <span class="mr15">收录于：'+data[i]['create_time']+'</span> <span>阅读：'+data[i]['browse']+'</span></p>'
									content += '</div>'
								content += '</div>'
							content += '</div>'
				    	}

				    	if(type == 'html'){

				    		if(res.data.length == 0){

						    	ice.pop({content:'找不到开源项目数据！',icon:'warning'})

				    			ice("#proList").html('')
				    			ice("#gengduo").hide();
				    			ice("#proList").hide();
					    		return false;
					    	} else{

					    		ice("#proList").show();
				    			ice("#gengduo").show();
				    			ice("#proList").html(content)
					    	}
				    	} else{

				    		if(res.data.length == 0){
					    		ice.pop({content:'数据全部加载完'})
					    		ice("#gengduo").hide();
					    		return false;
					    	}

				    		// 下一页的情况
				    		ice("#proList").append(content)
				    		var page = parseInt(maps.page) + 1
				    		ice("#page").val(page)
				    	}
			    	}
			    }
			});
		}
	})
</script>
{/block}